<template>
  <div class="setting-wrapper">
    <el-row class="container">
      <div class="title">优惠政策：</div>
      <el-input v-model="info.policy" type="textarea" placeholder="请输入优惠政策" class="textarea-container1" />
    </el-row>
    <el-row class="container">
      <div class="title">开放时间：</div>
      <el-input v-model="info.open_time" type="textarea" placeholder="请输入开放时间" class="textarea-container1" />
    </el-row>
    <el-row class="container">
      <div class="title">购票须知：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.ticket_notice" :height="300" />
      </div>
    </el-row>
    <el-row class="container">
      <div class="title">游玩指南：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.play_guide" :height="300" />
      </div>
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { getRoomTime, postRoomTime } from '@/api/params'
export default {
  name: 'ParamsScenicStoredValue',
  components: {
    Tinymce
  },
  data() {
    return {
      info: {
        policy: '',
        open_time: '',
        ticket_notice: '',
        play_guide: ''
      }
    }
  },
  created() {
    this.getRoom()
  },
  methods: {
    async getRoom() {
      const res = await getRoomTime()
      if (!res.data.config) {
        return
      } else {
        this.info = res.data.config
      }
    },
    async handleSave() {
      const type = 'scenic'
      const { policy, open_time, ticket_notice, play_guide } = this.info
      if (policy.trim() === '' || open_time.trim() === '') {
        this.$message.warning({
          message: '优惠政策或者开放时间不能为空',
          duration: 1000
        })
        return
      }
      await postRoomTime({ type, policy, open_time, play_guide, ticket_notice })
      this.$message.success({
        message: '保存成功',
        duration: 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .container {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title {
      width: 140px;
    }
    .input-container{
      width: 300px;
    }
    .textarea-container1 {
      width: 400px;
    }
  }
  .tinymce{
    width: 80%;
  }
}
</style>
